[자바스크립트] call() apply() 사용해 함수 this 값 지정하는 방법

자바스크립트의 함수를 실행하는 방법은 아래와 같습니다. 예를들어 아래와 같이 show라는 이름의 함수가 있다면? show()라고 소괄호를 실행합니다.


이때 함수 또는 객체 내부의 함수인 메소드를 실행하는 방법으로 call(), apply()를 사용할 수 있습니다. 그럼 call()과 apply()는 언제 그리고 어떻게 사용할까요?

# 함수에서 apply(), call()를 사용하는 이유

이 둘을 사용하는 이유를 먼저 알아봅니다. 함수가 실행될때 내부 콘텍스트의 this는 실행중인 객체 자신을 가리키거나 객체 내부의 함수가 아니라면 window 객체를 가리킬 것입니다. 이때 this가 가리키는 대상을 바꿀 수 있는데 이때 this값을 조작하는데 사용하는 방법이 바로 call()과 apply()입니다.

! call() apply() 사용방법

@ call() 사용 방법

함수.call(지정할 객체명, 전달할 매개변수)



@ apply() 사용 방법

함수.apply(지정할 객체명, [전달할 매개변수])


call()과 apply()는 동일하게 this 키워드가 가리키는 대상을 변경할 수 있게해줍니다. 단지 인자를 전달하는 방법에서 작은 차이가 있습니다. 그럼 먼저 call()에 대하여 알아보도록 하겠습니다. 아래 예제를 참고해주세요.

# call()을 사용한 방법 예제보기

아래 에제는 객체 obj1 그리고 obj2가 있습니다. 둘 다 getName이라는 함수를 가지고 있는데 만약 obj1에서 getName() 함수를 실행할 경우 함수 내부의 this가 obj2를 가리키도록 바꾸려면 어떻게할까요?

이제 obj1.getName()을 실행해보겠습니다.

이제 call()을 사용하여 this 키워드가 obj2를 가리키도록 변경해봅니다.

이처럼 내부 콘텍스트의 this값이 지정한 obj2로 바꾸어 다른 값이 출력되게됩니다.

라이브러리 등에서 call() 또는 apply()를 사용하면 스코프 체인을 우회하는데도 사용됩니다. 그렇다면 아래는 apply()를 사용하는 방법입니다.

# 또 다른 예제보기, apply(), call()

위 예제는 전달할 인자가 없으므로 call(), apply() 동일합니다. 인자를 전달하는 경우라면? 아래와 같이 예제를 만들 수 있습니다.

이제 위 객체의 메소드 sum()을 실행해봅니다. 먼저 일반적인 방법입니다. 그 후에 call(), apply()를 각각 사용하여봅니다.

결과는 역시 동일합니다. 다만 인자(arguments)를 전달하는 방법에 차이가 있습니다.